<!--移动端——基础配置-->
<template>
  <div>
    <div class="ele-page-header">
      <div class="ele-page-title">移动页配置</div>
      <div class="ele-page-desc">
        用于移动页展示等场景。
      </div>
    </div>
    <div style="padding-bottom: 71px">
      <el-form ref="form"
               :model="form"
               :rules="rules"
               label-width="130px"
               @keyup.enter.native="submit"
               @submit.native.prevent>
        <div class="ele-body">
          <el-card shadow="never"
                   header="基础配置"
                   body-style="padding: 22px 22px 0 22px;">
            <el-row :gutter="15">
              <el-col :xs="12"
                      :sm="12"
                      :lg="8"
                      :xl="8">
                <el-form-item label="服务商户:"
                              label-width="130px"
                              prop="systemName">
                  <!--input 限制只能输入整数-->
                  <el-input class="delInput"
                            type="number"
                            oninput="value=value.replace(/[^0-9]/g,'')"
                            v-model.number="form.serviceMerchant"
                            placeholder="请输入服务商户数"
                            clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="12"
                      :sm="12"
                      :lg="8"
                      :xl="8">
                <el-form-item label="视频剪辑数:"
                              label-width="130px"
                              prop="theRecord">
                  <el-input class="delInput"
                            type="number"
                            oninput="value=value.replace(/[^0-9]/g,'')"
                            v-model.number="form.videClipNumber"
                            placeholder="请输入视频剪辑数"
                            clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="12"
                      :sm="12"
                      :lg="8"
                      :xl="8">
                <el-form-item label="全网曝光次:"
                              label-width="130px"
                              prop="forTheRecord">
                  <el-input class="delInput"
                            type="number"
                            oninput="value=value.replace(/[^0-9]/g,'')"
                            v-model.number="form.exposureTimes"
                            placeholder="请输入全网曝光次数"
                            clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="12"
                      :sm="12"
                      :lg="8"
                      :xl="8">
                <el-form-item label="账号授权:"
                              label-width="130px"
                              prop="versionInformation">
                  <el-input class="delInput"
                            type="number"
                            oninput="value=value.replace(/[^0-9]/g,'')"
                            v-model.number="form.accountAuthorization"
                            placeholder="请输入账号授权个数"
                            clearable />
                </el-form-item>
              </el-col>
              <el-col :xs="12"
                      :sm="12"
                      :lg="8"
                      :xl="8">
                <el-form-item label="活动营销:"
                              label-width="130px"
                              prop="versionInformation">
                  <el-input class="delInput"
                            type="number"
                            oninput="value=value.replace(/[^0-9]/g,'')"
                            v-model.number="form.eventMarketing"
                            placeholder="请输入活动营销场数"
                            clearable />
                </el-form-item>
              </el-col>
              <el-col :xs="12"
                      :sm="12"
                      :lg="8"
                      :xl="8">
                <el-form-item label="数字人剪辑:"
                              label-width="130px"
                              prop="versionInformation">
                  <el-input class="delInput"
                            type="number"
                            oninput="value=value.replace(/[^0-9]/g,'')"
                            v-model.number="form.szrClip"
                            placeholder="请输入数字人剪辑条数"
                            clearable />
                </el-form-item>
              </el-col>
              <el-col :xs="12"
                      :sm="12"
                      :lg="8"
                      :xl="8">
                <el-form-item label="联系电话"
                              prop="phone">
                  <el-input maxlength="11"
                            v-model="form.phoneNumber"
                            placeholder="请输入联系电话"
                            clearable />
                </el-form-item>
              </el-col>
              <!--<el-col :xs="24" :sm="24" :lg="24" :xl="24">
                <el-form-item label="LOGO图" prop="coverImage">
                  <ele-image-upload
                    accept=".jpg,.jpeg,.png"
                    :limit="1"
                    :multiple="false"
                    v-model="fileList"
                    :auto-upload="false"
                    :before-remove="onBeforeRemove"
                  />
                  <div style="font-size: 12px;color: #ccc">建议图片尺寸为716*272</div>
                </el-form-item>
              </el-col>-->
            </el-row>
          </el-card>
        </div>
        <el-row style="padding:0 15px;"
                :gutter="20">
          <!--矩阵功能-->
          <el-col :xs="12"
                  :sm="12"
                  :lg="8"
                  :xl="8"
                  class="m-bottom15">
            <el-card shadow="never"
                     header="矩阵功能"
                     body-style="padding: 22px 22px 0 22px;">
              <el-form-item label="矩阵视频:">
                <el-input v-model="form.matrixVideo"
                          placeholder="请输入矩阵视频链接"
                          clearable></el-input>
                <!-- drag:是否启用拖拽上传 -->
                <!--<div class="upload-demo" @click="uploadClick">
                  <video :src="form.matrixVideo" class="video-avatar" v-if="form.matrixVideo"></video>
                  <i class="el-icon-plus" v-else></i>
                </div>-->
                <!--悬浮播放按钮-->
                <!--<div class="positive-btn flex" @click.stop="download(form.matrixVideo)" v-if="form.matrixVideo">
                  <i class="el-icon-caret-right"></i>
                </div>
                &lt;!&ndash;删除视频&ndash;&gt;
                <div class="del-position flex" v-if="form.matrixVideo" @click.stop="delVideo(1)">
                  <i class="el-icon-close"></i>
                </div>
                &lt;!&ndash; 矩阵视频 drag:是否启用拖拽上传                  :on-change="onUpload" &ndash;&gt;
                <el-upload
                  :on-change="(file, fileList) => {onUpload( file, fileList,1)}"
                  :on-success="handleAvatarSuccess"
                  class="upload-demo relative"
                  :class="form.matrixVideo ? 'no-hover' : ''"
                  :disabled="form.matrixVideo ? true : false"
                  :show-file-list="false"
                  :limit="1"
                  :action="ossUrl"
                  accept=".mp4,.3gp,.mov">
                  <video v-if="form.matrixVideo" :src="form.matrixVideo" class="video-avatar"></video>
                  <i class="el-icon-plus" v-else></i>
                </el-upload>-->
              </el-form-item>

              <el-form-item label="矩阵详情:"
                            prop="loginBackground">
                <el-button @click="addDetial(form.matrixDetails,1)">{{form.matrixDetails ? '修改' : '添加'}}矩阵详情</el-button>
              </el-form-item>
            </el-card>
          </el-col>
          <!--视频剪辑功能-->
          <el-col :xs="12"
                  :sm="12"
                  :lg="8"
                  :xl="8"
                  class="m-bottom15">
            <el-card shadow="never"
                     header="视频剪辑功能"
                     body-style="padding: 22px 22px 0 22px;">
              <el-form-item label="视频剪辑视频:">
                <el-input v-model="form.clipVideo"
                          placeholder="请输入视频剪辑视频链接"
                          clearable></el-input>
                <!--悬浮播放按钮-->
                <!--<div class="positive-btn flex" @click.stop="download(form.clipVideo)" v-if="form.clipVideo">
                  <i class="el-icon-caret-right"></i>
                </div>
                &lt;!&ndash;删除视频&ndash;&gt;
                <div class="del-position flex" v-if="form.clipVideo" @click="delVideo(2)">
                  <i class="el-icon-close"></i>
                </div>
                &lt;!&ndash; drag:是否启用拖拽上传 &ndash;&gt;
                <el-upload
                  :on-change="(file, fileList) => {onUpload( file, fileList,2)}"
                  class="upload-demo"
                  :class="form.clipVideo ? 'no-hover' : ''"
                  :disabled="form.clipVideo ? true : false"
                  :show-file-list="false"
                  :limit="1"
                  :action="ossUrl"
                  accept=".mp4,.3gp,.mov">
                  <video v-if="form.clipVideo" :src="form.clipVideo" class="video-avatar"></video>
                  <i class="el-icon-plus" v-else></i>
                </el-upload>-->
              </el-form-item>

              <el-form-item label="视频剪辑详情:"
                            prop="loginBackground">
                <el-button @click="addDetial(form.clipDetails,2)">{{form.clipDetails ? '修改' : '添加'}}视频剪辑详情</el-button>
              </el-form-item>
            </el-card>
          </el-col>
          <!--云闪推功能-->
          <el-col :xs="12"
                  :sm="12"
                  :lg="8"
                  :xl="8"
                  class="m-bottom15">
            <el-card shadow="never"
                     header="云闪推功能"
                     body-style="padding: 22px 22px 0 22px;">
              <el-form-item label="云闪推视频:"
                            prop="loginBackground">
                <el-input v-model="form.pushVideo"
                          placeholder="请输入云闪推视频链接"
                          clearable></el-input>
                <!--悬浮播放按钮-->
                <!--<div class="positive-btn flex" @click.stop="download(form.pushVideo)" v-if="form.pushVideo">
                  <i class="el-icon-caret-right"></i>
                </div>
                &lt;!&ndash;删除视频&ndash;&gt;
                <div class="del-position flex" v-if="form.pushVideo" @click="delVideo(3)">
                  <i class="el-icon-close"></i>
                </div>
                &lt;!&ndash; drag:是否启用拖拽上传 &ndash;&gt;
                <el-upload
                  :on-change="(file, fileList) => {onUpload( file, fileList,3)}"
                  class="upload-demo"
                  :class="form.pushVideo ? 'no-hover' : ''"
                  :disabled="form.pushVideo ? true : false"
                  :show-file-list="false"
                  :limit="1"
                  :action="ossUrl"
                  accept=".mp4,.3gp,.mov">
                  <video v-if="form.pushVideo" :src="form.pushVideo" class="video-avatar"></video>
                  <i class="el-icon-plus" v-else></i>
                </el-upload>-->
              </el-form-item>
              <el-form-item label="云闪推详情:"
                            prop="loginBackground">
                <el-button @click="addDetial(form.pushDetails,3)">{{form.pushDetails ? '修改' : '添加'}}云闪推详情</el-button>
              </el-form-item>
            </el-card>
          </el-col>

          <!--现场大屏功能-->
          <el-col :xs="12"
                  :sm="12"
                  :lg="8"
                  :xl="8"
                  class="m-bottom15">
            <el-card shadow="never"
                     header="现场大屏功能"
                     body-style="padding: 22px 22px 0 22px;">
              <el-form-item label="现场大屏视频:"
                            prop="loginBackground">
                <el-input v-model="form.largeVideo"
                          placeholder="请输入现场大屏视频链接"
                          clearable></el-input>
                <!--悬浮播放按钮-->
                <!--<div class="positive-btn flex" @click.stop="download(form.largeVideo)" v-if="form.largeVideo">
                  <i class="el-icon-caret-right"></i>
                </div>
                &lt;!&ndash;删除视频&ndash;&gt;
                <div class="del-position flex" v-if="form.largeVideo" @click="delVideo(4)">
                  <i class="el-icon-close"></i>
                </div>
                &lt;!&ndash; drag:是否启用拖拽上传 &ndash;&gt;
                <el-upload
                  :on-change="(file, fileList) => {onUpload( file, fileList,4)}"
                  class="upload-demo"
                  :class="form.largeVideo ? 'no-hover' : ''"
                  :disabled="form.largeVideo ? true : false"
                  :show-file-list="false"
                  :limit="1"
                  :action="ossUrl"
                  accept=".mp4,.3gp,.mov">
                  <video v-if="form.largeVideo" :src="form.largeVideo" class="video-avatar"></video>
                  <i class="el-icon-plus" v-else></i>
                </el-upload>-->
              </el-form-item>
              <el-form-item label="现场大屏详情:"
                            prop="loginBackground">
                <el-button @click="addDetial(form.largeDetails,4)">{{form.largeDetails ? '修改' : '添加'}}现场大屏详情</el-button>
              </el-form-item>
            </el-card>
          </el-col>

          <!--抖支付功能-->
          <el-col :xs="12"
                  :sm="12"
                  :lg="8"
                  :xl="8"
                  class="m-bottom15">
            <el-card shadow="never"
                     header="抖支付功能介绍"
                     body-style="padding: 22px 22px 0 22px;">
              <el-form-item label="抖支付视频:"
                            prop="loginBackground">
                <el-input v-model="form.doypayVideo"
                          placeholder="请输入抖支付视频链接"
                          clearable></el-input>
                <!--悬浮播放按钮-->
                <!--<div class="positive-btn flex" @click.stop="download(form.doypayVideo)" v-if="form.doypayVideo">
                  <i class="el-icon-caret-right"></i>
                </div>
                &lt;!&ndash;删除视频&ndash;&gt;
                <div class="del-position flex" v-if="form.doypayVideo" @click="delVideo(5)">
                  <i class="el-icon-close"></i>
                </div>
                &lt;!&ndash; drag:是否启用拖拽上传 &ndash;&gt;
                <el-upload
                  :on-change="(file, fileList) => {onUpload( file, fileList,5)}"
                  class="upload-demo"
                  :class="form.doypayVideo ? 'no-hover' : ''"
                  :disabled="form.doypayVideo ? true : false"
                  :show-file-list="false"
                  :limit="1"
                  :action="ossUrl"
                  accept=".mp4,.3gp,.mov">
                  <video v-if="form.doypayVideo" :src="form.doypayVideo" class="video-avatar"></video>
                  <i class="el-icon-plus" v-else></i>
                </el-upload>-->
              </el-form-item>
              <el-form-item label="抖支付详情:"
                            prop="loginBackground">
                <el-button @click="addDetial(form.doypagDetails,5)">{{form.doypagDetails ? '修改' : '添加'}}抖支付详情</el-button>
              </el-form-item>
            </el-card>
          </el-col>
          <!--数字人功能-->
          <el-col :xs="12"
                  :sm="12"
                  :lg="8"
                  :xl="8"
                  class="m-bottom15">
            <el-card shadow="never"
                     header="数字人功能"
                     body-style="padding: 22px 22px 0 22px;">
              <el-form-item label="数字人视频:"
                            prop="loginBackground">
                <el-input v-model="form.szrVideo"
                          placeholder="请输入数字人视频链接"
                          clearable></el-input>
                <!--悬浮播放按钮-->
                <!--<div class="positive-btn flex" @click.stop="download(form.szrVideo)" v-if="form.szrVideo">
                  <i class="el-icon-caret-right"></i>
                </div>
                &lt;!&ndash;删除视频&ndash;&gt;
                <div class="del-position flex" v-if="form.szrVideo" @click="delVideo(6)">
                  <i class="el-icon-close"></i>
                </div>
                &lt;!&ndash; drag:是否启用拖拽上传 &ndash;&gt;
                <el-upload
                  :on-change="(file, fileList) => {onUpload( file, fileList,6)}"
                  :on-success="handleAvatarSuccess"
                  class="upload-demo"
                  :class="form.szrVideo ? 'no-hover' : ''"
                  :disabled="form.szrVideo ? true : false"
                  :show-file-list="false"
                  :limit="1"
                  :action="ossUrl"
                  accept=".mp4,.3gp,.mov">
                  <video v-if="form.szrVideo" :src="form.szrVideo" class="video-avatar"></video>
                  <i class="el-icon-plus" v-else></i>
                </el-upload>-->
              </el-form-item>
              <el-form-item label="数字人详情:"
                            prop="loginBackground">
                <el-button @click="addDetial(form.szrDetails,6)">{{form.szrDetails ? '修改' : '添加'}}数字人详情</el-button>
              </el-form-item>
            </el-card>
          </el-col>
        </el-row>
        <div class="ele-body">
          <el-card shadow="never"
                   header="抖支付费率配置"
                   body-style="padding: 22px 22px 0 22px;">
            <el-row :gutter="15">
              <el-col :xs="12"
                      :sm="12"
                      :lg="8"
                      :xl="8">
                <el-form-item label="oem扣率:"
                              label-width="130px"
                              prop="oemCalcVal">
                  <!--input 限制只能输入整数-->
                  <el-input class="delInput"
                            type="number"
                            @blur="e=>inputChangeWx(e,form.oemCalcVal)"
                            oninput="value=value.replace(/[^0-9]/g,'')"
                            v-model.number="form.oemCalcVal"
                            maxlength="3"
                            placeholder="请输入oem扣率"
                            clearable><template v-slot:append>%</template></el-input>
                </el-form-item>
              </el-col>

            </el-row>
          </el-card>
        </div>
        <!-- 底部工具栏 -->
        <div class="ele-bottom-tool">
          <div v-if="validMsg"
               class="ele-text-danger">
            <i class="el-icon-circle-close"></i>
            <span>{{ validMsg }}</span>
          </div>
          <div class="ele-bottom-tool-actions">
            <el-button type="primary"
                       :loading="loading"
                       @click="submit">
              提交
            </el-button>
          </div>
        </div>
      </el-form>
    </div>
    <!--上传视频文件，弹框-->
    <file-upload :visible.sync="folderUpload"
                 @done="onDone" />
    <!-- 新建/编辑 详情弹窗 -->
    <add-detail ref="detail"
                :visible.sync="addShow"
                @done="reload"></add-detail>
  </div>
</template>

<script>
import EleImageUpload from 'ele-admin/es/ele-image-upload';
import { userOssSignature } from "@/api/creatCenter/material";
import { getToken } from "@/utils/token-util";
import axios from "axios";
import AddDetail from "@/views/system/basicConfiguration/components/add-detail";
import { saveMobileConfig, queryMobileConfig } from "@/api/system/basicConfiguration";
import fileUpload from './components/file-upload.vue';

export default {
  name: "index.vue",
  components: { AddDetail, fileUpload, EleImageUpload },
  data () {
    return {
      ossUrl: localStorage.getItem('ossUrl') ? localStorage.getItem('ossUrl') : '', //上传图片action
      // 上传文件弹窗是否打开
      folderUpload: false,
      // 表单验证信息
      validMsg: '',
      // 表单数据
      form: {
      },

      fileList: {},
      videoUrl: '',
      // 表单提交状态
      loading: false,
      // 表单验证规则
      rules: {},

      // 是否显示编辑弹窗
      addShow: false,
      // 当前编辑数据
      current: null,
      matrixUrl: '',  // 矩阵视频

      // 上传背景图片url
      fileList: [],
      dataInfo: {},
      data: {}
    }
  },
  created () {
    this.queryConfigs()

  },
  mounted () {
  },
  methods: {
    /* 删除增加确认弹窗 */
    onBeforeRemove () {
      return new Promise((resolve, reject) => {
        this.$confirm('确定要删除吗?', '提示', {
          type: 'warning'
        })
          .then(() => {
            resolve();
          })
          .catch(() => {
            reject();
          });
      });
    },

    async uploadBj () {
      this.dataInfo = await userOssSignature()
      console.log('this.dataInfo', this.dataInfo)
      let file = this.fileList[0].file

      let filename = file.name;
      let markIndex = (filename).lastIndexOf('.');
      let suffix = filename.substring(markIndex)    // 图片后缀(例.jpg)
      let date = new Date().getTime();    // 当前时间戳
      // 构建请求参数
      let param = new FormData()
      param.append("key", this.dataInfo.dir + date + suffix)
      param.append("policy", this.dataInfo.policy)
      param.append("OSSAccessKeyId", this.dataInfo.accessId)
      param.append("success_action_status", '200')
      // param.append("callback",  this.dataInfo.callback)     //回调（not)
      param.append("signature", this.dataInfo.signature)
      param.append("file", file, file.name)
      param.append('success_action_status', '200')
      let config = {
        headers: {
          'Access-Control-Allow-Origin': '*',
          'x-oss-callback-Authorization': getToken()
        }
      }
      axios.post(this.dataInfo.host, param, config).then(res => {
        if (res.status == 200) {
          console.log('this.dataInfo.host', this.dataInfo.host + '/' + date + suffix)
          let url = this.dataInfo.host + '/' + date + suffix;
          this.form.coverImage = url;
          console.log(' this.form.coverImage', this.form.coverImage, 'url', url)
          let type = file.type;
          this.fileList = []
          this.uploadApi()
        }
        else {
          this.$message.error('上传失败');
        }

      }).catch(err => {
        console.log(err)
      })
      // }
    },
    // 跳转下载视频
    download (url) {
      console.log("点击跳转下载视频", url)
      window.open(url)
    },
    // 根据分类删除视频
    delVideo (type) {
      console.log('根据分类删除视频', type)
      return new Promise((resolve, reject) => {
        this.$confirm('确定要删除该视频吗?', '提示', {
          type: 'warning'
        })
          .then(() => {
            switch (type) {
              case 1:
                this.$set(this.form, 'matrixVideo', '')
                break;
              case 2:
                this.$set(this.form, 'clipVideo', '')
                break;
              case 3:
                this.$set(this.form, 'pushVideo', '')
                break;
              case 4:
                this.$set(this.form, 'largeVideo', '')
                break;
              case 5:
                this.$set(this.form, 'doypayVideo', '')
                break;
              case 6:
                this.$set(this.form, 'szrVideo', '')
                break;
              default:
                console.log("进入default")
                break;
            }
          })
          .catch(() => {
            reject();
          });
      });
    },
    //合格率阈值
    inputChangeZfb (e, value) {
      console.log(value)
      if (typeof value == "number") {
        if (value > 100) {
          this.$message({
            message: "输入的扣率大于100请重新输入",
            type: "warning",
          });
          this.form.zfbCalcVal = 100
        }
      }
      return

    },
    inputChangeWx (e, value) {
      console.log(value)
      if (typeof value == "number") {
        if (value > 100) {
          this.$message({
            message: "输入的扣率大于100请重新输入",
            type: "warning",
          });
          this.form.oemCalcVal = 100
        }
      }
      return

    },
    queryConfigs () {
      queryMobileConfig()
        .then((data) => {
          this.fileList = []
          this.data = data.data
          this.form = data.data
          let url = { url: this.data.coverImage }
          this.fileList.push(url)
          console.log('data', data)
        }).catch((e) => {
          this.$message.error(e);
        });
    },
    // 暂未使用
    onDone (file) {
      this.form.matrixVideo = file;
      console.log("this.form.matrixVideo=====", this.form.matrixVideo)
    },
    uploadClick () {
      this.folderUpload = true;
    },
    /*功能详情，回显*/
    reload (data, type) {
      console.log("功能详情，回显done=====", data, type)
      if (type == 1) {
        this.form.matrixDetails = data
      }
      if (type == 2) {
        this.form.clipDetails = data
      }
      if (type == 3) {
        this.form.pushDetails = data
      }
      if (type == 4) {
        this.form.largeDetails = data
      }
      if (type == 5) {
        this.form.doypagDetails = data
      }
      if (type == 6) {
        this.form.szrDetails = data
      }
    },
    // 添加详情
    addDetial (details, type) {
      console.log("details,type", details, type)
      this.addShow = true;
      this.$nextTick(() => {
        this.$refs['detail'].show(details, type)
      })

    },
    /* 上传 */
    // async onUpload(url) {
    /*
    *  type 1:矩阵视频
    *  type 2:剪辑视频
    *  type 3:云闪推视频
    *  type 4:现场大屏视频
    *  type 5:抖支付视频
    *  type 6:数字人视频
    * */
    async onUpload (url, fileList, type) {
      console.log("进入上传1111111111", type)
      // 防止:on-change事件调用两次的问题
      if (url.status !== 'ready') return;
      console.log("进入上传222222")
      this.fileList = url
      console.log('this.fileList', this.fileList)
      this.data = await userOssSignature()
      let file = this.fileList.raw
      let filename = file.name;
      let markIndex = (filename).lastIndexOf('.');
      let suffix = filename.substring(markIndex)
      let date = new Date().getTime();
      // 构建请求参数
      let param = new FormData()
      param.append("key", this.data.dir + date + suffix)
      param.append("policy", this.data.policy)
      param.append("OSSAccessKeyId", this.data.accessId)
      param.append("success_action_status", '200')
      // param.append("callback",  this.data.callback)     //回调（not)
      param.append("signature", this.data.signature)
      param.append("file", file, file.name)
      param.append('success_action_status', '200')
      let config = {
        headers: {
          'Access-Control-Allow-Origin': '*',
          'x-oss-callback-Authorization': getToken()
        }
      }
      axios.post(this.data.host, param, config).then(res => {
        if (res.status == 200) {
          // 修改
          // this.$refs.upload.submit();  // 图片上传进度
          console.log('this.data.host', this.data.host + '/' + date + suffix, 'type', type)
          let videoUrl = this.data.host + '/' + date + suffix;
          if (type == 1) {
            this.$set(this.form, 'matrixVideo', videoUrl)
          }
          if (type == 2) {
            this.$set(this.form, 'clipVideo', videoUrl)
            console.log('this.form.clipVideo', this.form.clipVideo)
          }
          if (type == 3) {
            this.$set(this.form, 'pushVideo', videoUrl)
            console.log('this.form.pushVideo', this.form.pushVideo)
          }
          if (type == 4) {
            this.$set(this.form, 'largeVideo', videoUrl)
            console.log('this.form.largeVideo', this.form.largeVideo)
          }
          if (type == 5) {
            this.$set(this.form, 'doypayVideo', videoUrl)
            console.log('this.form.doypayVideo', this.form.doypayVideo)
          }
          if (type == 6) {
            this.$set(this.form, 'szrVideo', videoUrl)
            console.log('this.form.szrVideo', this.form.szrVideo)
          }
        } else {
          this.loading = false
          this.$message.error('上传失败');
        }

      }).catch(err => {
        console.log(err)
      })
    },

    handleAvatarSuccess (res, file) {
      console.log("上传成功res, file----", res, file)
      // this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload (file) {
      const isLt2M = file.size / 1024 / 1024 < 20;
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 20MB!');
      }
      return isLt2M;
    },

    uploadApi () {
      this.loading = true;
      const data = {
        ...this.form
      };
      saveMobileConfig(data).then((msg) => {
        this.loading = false;
        this.$message.success('提交成功！');
        this.queryConfigs()
      }).catch((e) => {
        this.loading = false;
        this.$message.error(e);
      });
    },

    //提交保存
    submit () {
      this.$refs['form'].validate((valid, obj) => {
        if (valid) {
          // 手机号验证
          if (this.form.phoneNumber && this.$sun.checkModbile(this.form.phoneNumber) == false) {
            this.$message.error('手机号码格式不正确！');
            return
          }
          this.validMsg = '';
          console.log('this.form====', this.form)

          // 上传图片未修改，则直接调用‘保存设备’接口
          if (this.data && this.fileList[0].url == this.data.coverImage) {
            this.uploadApi()
          }
          else {
            this.uploadBj()
          }

        } else {
          this.validMsg = ` 共有校验 ${Object.keys(obj).length} 项不通过`;
          return false;
        }
      });
    }
  }
}
</script>

<style scoped lang="less">
/*隐藏input（type=number)右边的小箭头*/
/deep/.delInput input::-webkit-outer-spin-button,
/deep/.delInput input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
/deep/.delInput input[type='number'] {
  -moz-appearance: textfield;
}

.video-avatar {
  height: 100px;
}
.positive-btn {
  z-index: 9;
  width: 26px;
  background: #fff;
  height: 26px;
  border-radius: 50%;
  position: absolute;
  top: 39px;
  left: 39px;
  opacity: 0.7;
  i {
    font-size: 22px;
  }
}
/* ‘删除视频’ 图标 */
.del-position {
  position: absolute;
  top: 0px;
  left: 76px;
  /*right: 0px;*/
  width: 25px;
  height: 25px;
  z-index: 9;
  background-color: #666;
  border-radius: 0 0 0 20px;
  i {
    font-size: 14px;
    color: #fff;
    margin-top: -3px;
    margin-right: -2px;
    font-size: 16px;
    color: #fff;
  }
}
.no-hover {
  pointer-events: none;
}
.upload-demo {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.upload-demo:hover {
  border-color: #409eff;
  i {
    color: #409eff;
  }
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  border: 1px dashed #d9d9d9;
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>
